<template>
  <div>
    <el-dialog
      :visible.sync="dialogTableVisible"
      :modal="false"
      :close-on-click-modal="false"
      v-dialogDrags
      width="50%"
      @close="closed"
    >
      <!-- 查看其他绿地信息对话框 -->
      <div class="container">
        <!-- 基础信息 -->
        <el-row class="content-row">
          <el-col :span="24" class="title-row">
            <span>| 详细信息</span>
          </el-col>
          <el-col :span="24">
            <el-tabs v-model="activeName">
              <el-tab-pane label="基本信息" name="first">
                <el-row>
                  <el-descriptions
                    :column="2"
                    border
                    :contentStyle="contentStyle"
                    :labelStyle="labelStyle"
                    size:small
                  >
                    <el-descriptions-item>
                      <template slot="label"> OBJECTID </template>
                      {{ formData.objectid }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 标识码 </template>
                      {{ formData.objcode }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 名称 </template>
                      {{ formData.objname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 原挂牌号 </template>
                      {{ formData.yuangph }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 绿地所属大类 </template>
                      <dict-tag
                        :options="dict.type.sys_greenland_type"
                        :value="formData.type"
                      />
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 绿地所属中类 </template>
                      <dict-tag
                        :options="dict.type.sys_greenland_type_m"
                        :value="formData.type_m"
                      />
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">绿地所属小类</template>
                      <dict-tag
                        :options="dict.type.sys_greenland_type_s"
                        :value="formData.type_s"
                      />
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 状态 </template>
                      {{ formData.objstate }}</el-descriptions-item
                    >
                    <el-descriptions-item>
                      <template slot="label"> 所属行政区 </template>
                      {{ formData.suosxzq }}</el-descriptions-item
                    >
                    <el-descriptions-item>
                      <template slot="label"> 所属行政区 </template>
                      {{ formData.suosxzq }}</el-descriptions-item
                    >
                    <el-descriptions-item>
                      <template slot="label"> 所属街道 </template>
                      {{ formData.suosjd }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 所属社区 </template>
                      {{ formData.suossq }}
                    </el-descriptions-item>

                    <el-descriptions-item>
                      <template slot="label"> 主管部门名称 </template>
                      {{ formData.deptname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 权属单位名称 </template>
                      {{ formData.qsmcname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 养护单位名称 </template>
                      {{ formData.yhmcname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 养护人 </template>
                      {{ formData.yhr }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 采集时间 </template>
                      {{ this.localDate(formData.collectdate) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 更新时间 </template>
                      {{ this.localDate(formData.updatedate) }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 数据来源 </template>
                      {{ formData.datasource }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 备注 </template>
                      {{ formData.note }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="古树详情" name="second">
                <el-row>
                  <el-descriptions
                    :column="2"
                    border
                    :contentStyle="contentStyle"
                    :labelStyle="labelStyle"
                    size:small
                  >
                    <el-descriptions-item>
                      <template slot="label"> 树种 </template>
                      <!-- {{ formData.shuz }} -->
                      <dict-tag
                        :options="dict.type.sys_greenland_treetype"
                        :value="formData.shuz"
                      />
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 科 </template>
                      {{ formData.ke }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 中文名 </template>
                      {{ formData.zhongwm }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 拉丁名 </template>
                      {{ formData.ladm }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 生长场所 </template>
                      {{ formData.shengzcs }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 胸径(cm) </template>
                      {{ formData.xiongj }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 经度 </template>
                      {{ formData.jingd }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 纬度 </template>
                      {{ formData.weid }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 分布特点 </template>
                      {{ formData.fenbtd }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 权属 </template>
                      {{ formData.quans }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 特征代码 </template>
                      {{ formData.tezdm }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 真实树龄(年) </template>
                      {{ formData.zhenssl }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 估测树龄(年) </template>
                      {{ formData.gucsl }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 古树等级 </template>
                      {{ formData.gusdj }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 树高(m) </template>
                      {{ formData.shug }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 平均冠幅(m) </template>
                      {{ formData.pingjgf }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 东西冠幅(m) </template>
                      {{ formData.dongxgf }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 坡向 </template>
                      {{ formData.pox }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 坡度(度) </template>
                      {{ formData.pod }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 海拔(m) </template>
                      {{ formData.haib }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 土壤类型 </template>
                      {{ formData.turlx }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 生长势 </template>
                      {{ formData.shengzs }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 生长环境 </template>
                      {{ formData.shengzhj }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 影响生长因素 </template>
                      {{ formData.yingxszys }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 新增古树名木原因 </template>
                      {{ formData.xinzgsmmyy }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 古树历史 </template>
                      {{ formData.gusls }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label"> 占地面积(㎡) </template>
                      {{ formData.zhandmj }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <el-row class="content-row">
          <el-col :span="24" class="title-row">
            <span>| 照片资料</span>
          </el-col>
          <el-col :span="24">
            <template v-if="picFileList.length !== 0">
              <el-image
                style="width: 100px; height: 100px; margin: 10px"
                v-for="(pic, index) in picFileList"
                :key="index"
                :src="pic"
                :preview-src-list="picFileList"
              >
              </el-image>
            </template>
            <div
              v-if="picFileList.length == 0"
              style="margin: 10px; text-align: center"
            >
              暂无照片
            </div>
          </el-col>
        </el-row>

        <div class="footer">
          <el-button
            type="primary"
            plain
            icon="el-icon-circle-close"
            @click="cancel"
            >关 闭</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAttachList } from "../../../api/attachment/attach";
export default {
  dicts: [
    "sys_greenland_type",
    "sys_greenland_type_m",
    "sys_greenland_type_s",
    "sys_greenland_treetype",
  ],
  data() {
    return {
      picFileList: [],
      tableData: [],
      // 内容样式
      contentStyle: {
        "text-align": "left",
        // "min-width": "320px", //最小宽度
        "word-break": "break-all", //过长时自动换行
        "color":"black"
      },
      // label样式
      labelStyle: {
        // width: "100px",
        "text-align": "left",
        // "min-width": "120px",
        // "background-color": "#e7f6f3",
        "color":"black"
      },
      dialogTableVisible: false,
      activeName: "first",
      title: null,
      // 当前行数据
      rowFormData: null,
      // 遮罩层
      visible: false,
      // 修改表单参数
      formData: {},
      // 查询图层
      featureLayer: null,
      feature: undefined,
      selectedGraphic: undefined,
      mapview: undefined,
      highlight: undefined,
    };
  },
  created() {},
  activated() {
    // this.show();
  },
  mounted() {
    // this.initEditable();
    // this.rowFormData = this.paramObj.detailData;
    // this.featureLayer = this.paramObj.featureLayer;
    // this.show();
  },
  methods: {
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "background:rgb(28 133 195 / 20%);";
      }
    },

    cancel() {
      this.dialogTableVisible = false;
    },
    show(mapview, layerView, feature, isHighlight = true) {
      console.log(feature);
      this.mapview = mapview;
      this.dialogTableVisible = true;
      this.feature = feature;
      this.formData = this.feature.attributes;
      this.featureLayer = this.feature.layer;
      this.highlight?.remove();
      if (isHighlight) {
        // 高亮显示当前页要素
        this.highlight = layerView.highlight(feature);
        // this.mapview.goTo(this.feature.geometry.extent.expand(1));
      }

      // 查询附件
      this.getAttachment();
    },

    // 格式化日期
    localDate(time) {
      if (time == null) return "";
      var localTime = this.$moment.parseZone(time).local().format("YYYY-MM-DD");
      //   console.log(localTime);
      return localTime;
    },
    // 查询附件
    getAttachment() {
      let _self = this;
      _self.picFileList = [];
      const attachGroupId = _self.formData.photo;
      console.log("attachGroupId:" + attachGroupId);
      getAttachList(attachGroupId).then((response) => {
        if (response.code == "200" && response.data) {
          response.data.rows.forEach((element) => {
            const prefixUrl = window.mapConfig.nodeurl + "/attachfiles/";
            var attachUrl =
              prefixUrl + element.attachId + "." + element.attachType;

            var obj = {
              id: element.attachId,
              name: element.attachName,
              url: prefixUrl + element.attachId + "." + element.attachType,
            };
            _self.picFileList.push(obj.url);
          });
        }
      });
      // let _self = this;
      // _self.picFileList = [];
      // let objectid = _self.formData.objectid;
      // console.log("objectid:" + objectid);
      // const attachmentQuery = new AttachmentQuery({
      //   objectIds: [objectid],
      //   // attachmentsWhere: `objectid = ${objectid}` // attachment queries
      // });
      // _self.featureLayer
      //   .queryAttachments(attachmentQuery)
      //   .then((attachments) => {
      //     console.log(attachments);
      //     if (attachments[objectid]) {
      //       let attachment = attachments[objectid];
      //       attachment.forEach((item) => {
      //         _self.picFileList.push(item.url);
      //       });
      //     }
      //   })
      //   .catch(function (error) {
      //     console.log("attachment query error", error);
      //   });
    },
    closed() {
      // this.activeName = "1";
      this.mapview.graphics.removeAll();
      this.mapview.popup.close();
      this.highlight.remove();
    },
  },
};
</script>
<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #11a983;
  margin-bottom: 1vh;
}
.container {
  padding: 20px;
  height: 100%;
}
.content-row {
  margin-bottom: 1vh;
}
::v-deep .el-dialog__header {
  padding: 40px 20px 10px;
  background-color:rgba(17,169,131,0.8);
}
//::v-deep .el-descriptions__header {
// margin-bottom: 10px;
//}
.footer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}

::v-deep .el-descriptions__header {
  margin-bottom: 5px;
}

::v-deep .el-descriptions__title {
  font-size: 15px;
  color: #11a983;
}

::v-deep .el-dialog__body {
  padding: 0;
}

// 覆盖层元素增加可穿透点击事件
::v-deep .el-dialog__wrapper {
  pointer-events: none;
}

// 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
::v-deep .el-dialog {
  pointer-events: auto;
}
::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 6vh ;
    background: rgb(255,255,255,0.8) !important;
}
.el-button--primary {
    color: #FFF;
    background-color: rgba(17,169,131,0.8);
    border-color: #75fbe9;
}
::v-deep .el-descriptions-item{
  background-color: rgba(255, 255, 255, 0.2) !important;
}

::v-deep .el-descriptions__body{
  background: rgba(255, 255, 255, 0.2) !important;
}
/* el-descriptions border属性修改背景色及边框颜色 */
::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgb(160, 158, 154);
}
</style>
